// 首页轮播图区域
import React,{Component} from 'react';
import { View, Text, StyleSheet, Dimensions, Image } from 'react-native';

class Service extends Component{
    render() {
        return (
            <View>
                <Text style={styles.clean}>- 专业清洗 -</Text>
                <View style={styles.cleanlist}>
                    <View style={[styles.cleanitem,styles.one]}>
                        <Text style={styles.cleantitle}>洗衣</Text>
                        <Image source={require('../../images/chenyi.png')} style={styles.cleanimage}></Image>
                    </View>
                    <View style={[styles.cleanitem,styles.two]}>
                        <Text style={styles.cleantitle}>洗鞋</Text>
                        <Image source={require('../../images/xie.png')} style={styles.cleanimage}></Image>
                    </View>
                    <View style={[styles.cleanitem,styles.three]}>
                        <Text style={styles.cleantitle}>洗家纺</Text>
                        <Image source={require('../../images/jiafang.png')} style={styles.cleanimage}></Image>
                    </View>
                    <View style={[styles.cleanitem,styles.four]}>
                        <Text style={styles.cleantitle}>窗帘清洗</Text>
                        <Image source={require('../../images/chuanglian.png')} style={styles.cleanimage}></Image>
                    </View>
                </View>
            </View>

        )
    }
}

// 获得屏幕宽度
let swidth = Dimensions.get('window').width;

let styles = StyleSheet.create({
    clean:{
        textAlign:'center',
        fontSize:16,
        color:'rgba(0,0,0,0.2)',
        marginTop:15,
        marginBottom:10,
    },
    cleanlist:{
        flexDirection:'row',
        marginBottom:15,
        borderBottomWidth:10,
        borderBottomColor:'#F3F7FA',
    },
    cleanimage:{
        width:'65%',
        height:swidth/4*0.65,
    },
    cleanitem:{
        width:'25%',
        alignItems:'center',
        borderWidth:1,
        borderColor:'#F3F6FD',
        borderLeftWidth:0,
        paddingTop:10,
        paddingBottom:10,
    },
    cleantitle:{
        width:'100%',
        fontSize:15,
        textAlign:'center',
        marginBottom: 10,
    },
    one:{
        backgroundColor:'#FAFDFF',
    },
    two:{
        backgroundColor:'#FFFCFC',
    },
    three:{
        backgroundColor:'#FDFBFF',
    },
    four:{
        backgroundColor:'#FAFFFF',
    },

})


export default Service;

